/**
 * Created by python on 19-2-27.
 */
let vm = new Vue({
    el: '#app',
    data: {
        host: HOST,

        // binding
        binding_error_name: false,
        binding_error_password: false,
        binding_error_phone: false,
        binding_error_allow: false,
        binding_error_sms_code: false,
        binding_error_name_message: '',
        binding_error_phone_message: '',
        binding_error_sms_code_message: '',

        sms_code_tip: '获取验证码',
        sending_flag: false, // 正在发送短信标志

        binding_nickname: '',
        binding_password: '',
        binding_mobile: '',
        binding_name: false,
        binding_sms_code: ''
    },
    mounted: function(){
        // 从路径中获取qq重定向返回的code
        var code = this.get_query_string('code');
        axios.get(this.host + '/oauth/qq/user/?code=' + code, {
                responseType: 'json',
                withCredentials: true // 解决跨域问题
            })
            .then(response => {
                if (response.data.user_id){
                    // 用户已绑定
                    sessionStorage.clear();
                    localStorage.clear();
                    localStorage.user_id = response.data.user_id;
                    localStorage.username = response.data.username;
                    localStorage.token = response.data.token;
                    var state = this.get_query_string('state');
                    location.href = state;
                } else {
                    // 用户未绑定
                    this.access_token = response.data.access_token;
                }
            })
            .catch(error => {
                // console.log(error.response.data);
                // alert('服务器异常');
            })
    },
    methods: {
        // 获取url路径参数
        get_query_string: function(name){
            let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            let r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },
        // 注册
        binding_check_nickname: function (){
            // 用户名长度判断
            let len = this.binding_nickname.length;
            if(len<3||len>20) {
                this.binding_error_name_message = '请输入3-20个字符的用户名';
                this.binding_error_name = true;
            } else {
                this.binding_error_name = false;
            }
        },
        binding_check_pwd: function (){
            // console.log('验证密码');
            let len = this.binding_password.length;
            if(len<6||len>20){
                this.binding_error_password = true;
            } else {
                this.binding_error_password = false;
            }
        },
        binding_check_phone: function (){
            // console.log('验证手机');
            let re = /^1[345789]\d{9}$/;
            if(re.test(this.binding_mobile)) {
                axios.get(this.host + '/mobiles/'+ this.binding_mobile + '/count/', {
                        responseType: 'json'
                    })
                    .then(response => {
                        if (response.data.count > 0) {
                            this.binding_name = false;
                            this.binding_error_phone = false;
                            layer.msg('您是注册用户');
                        } else {
                            this.binding_name = true;
                            layer.msg('该手机号未被注册');
                            this.binding_error_phone = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response.data);
                        this.binding_error_phone = true;
                        this.binding_error_phone_message = error.response.data;
                    })
            } else {
                this.binding_error_phone_message = '您输入的手机号格式不正确';
                this.binding_error_phone = true;
            }

        },
        binding_check_sms_code: function (){
            // console.log('验证短信验证码');
            if(!this.binding_sms_code){
                this.binding_error_sms_code_message = '请填写短信验证码';
                this.binding_error_sms_code = true;
            } else {
                this.binding_error_sms_code = false;
            }

        },
        binding_check_sms_code_tip: function (){
            // console.log('验证短信验证码');
            if(!this.binding_sms_code){
                this.binding_error_sms_code_message = '请填写短信验证码';
                this.binding_error_sms_code = true;
            } else {
                this.binding_error_sms_code = false;
            }

        },
        send_sms_code: function () {
            if (this.sending_flag == true) {
                return;
            }
            this.sending_flag = true;

            this.binding_check_phone();
            if(this.binding_error_phone == false){
                // 向后端请求发送短信验证码
                axios.get(HOST+'/sms_codes/' + this.binding_mobile,{
                    responseType: 'json'
                })
                .then(response => {
                    // 表示后端发送短信成功
                    // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                    let num = 60;
                    // 设置一个计时器
                    let t = setInterval(() => {
                        if (num == 1) {
                            // 如果计时器到最后, 清除计时器对象
                            clearInterval(t);
                            // 将点击获取验证码的按钮展示的文本回复成原始文本
                            this.sms_code_tip = '获取验证码';
                            // 将点击按钮的onclick事件函数恢复回去
                            this.sending_flag = false;
                        } else {
                            num -= 1;
                            // 展示倒计时信息
                            this.sms_code_tip = num + '秒';
                        }
                    }, 1000, 60)
                })
            }


        },
        binding_on_submit: function(){
            console.log('提交了表单');
            this.binding_check_nickname();
            if(this.binding_name==false){
                this.binding_error_name = false;
            }
            this.binding_check_pwd();
            this.binding_check_phone();
            this.binding_check_sms_code();
            if(this.binding_error_name == false && this.binding_error_password == false
                && this.binding_error_phone == false && this.binding_error_sms_code == false && this.binding_error_allow == false) {
                console.log('即将发送异步请求');
                axios.post(this.host + '/oauth/qq/user/', {
                        nickname: this.binding_nickname,
                        password: this.binding_password,
                        mobile: this.binding_mobile,
                        sms_code: this.binding_sms_code,
                        access_token: this.access_token
                    }, {
                        responseType: 'json'
                    })
                    .then(response => {
                        // 记录用户的登录状态
                        sessionStorage.clear();
                        localStorage.clear();
                        sessionStorage.token = response.data.token;
                        sessionStorage.nickname = response.data.nickname;
                        sessionStorage.user_id = response.data.id;
                        location.href = '/index.html';

                    })
                    .catch(error=> {
                        if (error.response.status == 400) {
                            if ('non_field_errors' in error.response.data) {
                                this.binding_error_sms_code_message = error.response.data.non_field_errors[0];
                            } else {
                                this.binding_error_sms_code_message = '数据有误';
                            }
                            this.binding_error_sms_code = true;
                        } else {
                            console.log(error.response.data);
                        }
                    })
            }

        }
    }
});
